<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./bootstrap/bootstrap.css">


    <style>
        .search-query {
            background: url(https://static2.cnodejs.org/public/images/search.e53b380a.hashed.png) 4px 4px no-repeat #888;
            border-radius: 25px;
        }

        .navbar .search-query:focus {
            background-color: white;
            background-image: none;
        }

        .nav-1 {
            color: #cccccc;
        }

        .nav-1:hover {
            color: #ffffff;
        }

        .nav-pills .nav-link.active,
        .nav-pills .show>.nav-link {
            background-color: #80bd01;
        }

        .nav-2 {
            color: #80bd7f;
        }

        .text-message,
        .text-auther,
        .text-title {
            display: inline-block;
            vertical-align: middle
        }

        .inner {
            display: flex;
        }

        .text-auther {
            width: 130px;
        }

        .last_time {
            width: 80px;
        }

        .text-title {
            width: 500px;
            flex-grow: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        a {
            color: #444444;
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        .page-item {
            width: 34px;
            height: 38px;
            border: 1px solid #007bff;
            text-align: center;
            line-height: 38px;
        }

        .current {
            background-color: #80bd01;
        }

        .yan {
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }

        .panerl {
            /* height: 116px; */
            line-height: 30px;
            border: 1px solid;
            /* padding-left: 10px; */
            margin-bottom: 15px;
        }

        .panerl>.head {
            background-color: #f6f6f6;
        }

        .span-info {
            display: block;
            width: 150px;
            height: 34px;
            text-align: center;
            background-color: #3198b6;
            color: #fff;
        }

        /* panerl2 */

        .unstyled {
            padding: 0;
        }

        .unstyled>li {
            width: 340px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .under_logo img {
            width: 1400px;
            height: 200px;
        }
    </style>
</head>


<body>
    <!-- 头部导航条 -->
    <div class="navbar" style="background-color: #444444;height: 70px;">
        <div class="container">
            <div class="nav-left justify-content-start">
                <img src="./imgs/logo.PNG" style="width: 100px ;height: 50px;" alt="">
                <input type="text" class="search-query">
            </div>
            <ul class="nav justify-content-end">
                <li class="nav-item">
                    <a class="nav-link nav-1" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-1" href="#">新手入门</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-1" href="#">API</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-1 " href="#">关于</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link  nav-1" href="#">注册</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link  nav-1" href="#">登录</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 内容展示区域 -->
    <div class="container  mt-3">
        <div class="main row">
            <!-- 内容左侧区域 -->
            <div class="panel col-8">
                <!-- 头部 -->
                <div class="head" style="background-color: #f6f6f6;">
                    <ul class="nav nav-pills tab">
                        <li class="nav-item current ">
                            <a class="nav-link " href="#">全部</a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link nav-2" href="#">精华</a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link nav-2" href="#">分享</a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link nav-2" href="#">问答</a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link nav-2" href="#">招聘</a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link nav-2" href="#">客户端测试</a>
                        </li>

                    </ul>
                </div>
                <!-- 内容 -->
                <div class="inner border mt-2">
                    <!-- 作者 -->
                    <div class="text-auther">
                        <!-- 作者头像 -->
                        <a href="#">
                            <img src="" alt="">
                        </a>
                        <!-- 回复数和点击数 -->
                        <span>
                            <span class="count_of_replies" title="回复数">
                                1
                            </span>
                            <span class="count_seperator">/</span>
                            <span class="count_of_visits" title="点击数">
                                28728
                            </span>
                        </span>
                    </div>
                    <!-- 文章标题 -->
                    <div class="text-title">
                        <span class="put_top">置顶</span>
                        <a class="topic_title" href="/topic/639ebb35f0ccae2b10e0fb64" title="CNode - TG 频道">
                            CNode - TG 频道
                        </a>
                    </div>
                    <!-- 最后回复的时间 -->
                    <div class="text-message">
                        <a class="last_time pull-right" href="">
                            <img class="user_small_avatar" src="">
                            <span class="last_active_time">1 个月前</span>
                        </a>
                    </div>
                </div>
                <!-- 底部翻页按钮 -->
                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                        <li class="page-item">
                            <a class="page-link" id="forward" href="#" aria-label="Previous">&laquo; </a>
                        </li>
                        <li class="page-item yan">1</li>
                        <li class="page-item">2</li>
                        <li class="page-item">3</li>
                        <li class="page-item">
                            <a class="page-link" id="next" href="#" aria-label="Next">&raquo;</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <!-- 内容右侧区域 -->
            <div class="sidebar  col-4  ">
                <!-- 右侧第一个文本框 -->
                <div class="panerl" style="padding-left: 10px; padding-bottom: 10px;">
                    <p>CNode：Node.js专业中文社区</p>
                    <div>
                        您可以
                        <a href="#">登录</a>
                        或
                        <a href="#">注册</a>
                        , 也可以
                        <a href="#">
                            <span class="span-info">
                                通过 GitHub 登录
                            </span>
                        </a>
                    </div>
                </div>
                <!-- 右侧第二个文本框 -->
                <div class="panerl">
                    <div class="head">
                        <span class="col_fade">无人回复的话题</span>
                    </div>
                    <div class="inner">
                        <ul class="unstyled">
                            <li>
                                <div>
                                    <a class="dark topic_title" href="./content.html?id=63f4372d007208e4ef9e2db7"
                                        title="【轻快图片管理系统】基于Koa2 + Vue3.x + Vite3.x + typescript开发的轻量级快捷图片管理系统、图床系统">【轻快图片管理系统】基于Koa2
                                        + Vue3.x + Vite3.x + typescript开发的轻量级快捷图片管理系统、图床系统</a>
                                </div>
                            </li>
                            <li>
                                <div><a class="dark topic_title" href="./content.html?id=63eded550072088b519e2bb9"
                                        title="fabric.js开发图片编辑器的细节实现">fabric.js开发图片编辑器的细节实现</a>
                                </div>
                            </li>
                            <li>
                                <div><a class="dark topic_title" href="./content.html?id=63ecac6a0072081eb39e2b11"
                                        title="《狼书(卷3)：Node.js高级技术》视频版本">《狼书(卷3)：Node.js高级技术》视频版本</a>
                                </div>
                            </li>
                            <li>
                                <div><a class="dark topic_title" href="./content.html?id=63eb26120072083aff9e2a2a"
                                        title="自己封装了个数据模型库用于代替ORM">自己封装了个数据模型库用于代替ORM</a>
                                </div>
                            </li>
                            <li>
                                <div><a class="dark topic_title" href="./content.html?id=63e8e9ed00720876339e290d"
                                        title="ChatGpt免费用，绝不收费，帮助开发和学习">ChatGpt免费用，绝不收费，帮助开发和学习</a>
                                </div>
                            </li>
                        </ul>

                    </div>
                </div>
                <!-- 右侧第三个文本框 -->
                <div class="panerl">
                    <div class="head">
                        <span class="col_fade">客户端二维码</span>
                    </div>
                    <div class="inner cnode-app-download">
                        <img width="200" src="//static.cnodejs.org/FtG0YVgQ6iginiLpf9W4_ShjiLfU"
                            style="margin-left: 80px; ">
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- 底部logo -->
    <div class="under_logo">
        <a href="https://www.digitalocean.com/?refcode=eba02656eeb3"><img src="./imgs/logo_under.png"></a>
    </div>

    <script src="./axios/axios.js"></script>
    <script src="./jQuery/jquery.min.js"></script>
    <script src="./js/indexTest.js"></script>

</body>

</html>